<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../style/details.css">
    <link rel="stylesheet" href="../style/details1.css">
</head>

<body>
    <div id="topNavWrap">
        <div id="topNav">
            <div id="topNavLeft">
                <span>考拉欢迎你！</span>
                <a class="login" href="#">登录</a>
                <span class="sep">|</span>
                <a class="register" target="_blank" href="#">免费注册</a>
                <a class="app" target="_blank" href="#">手机考拉</a>
            </div>
            <ul id="topNavRight">
                <li><a href="#">每日签到</a></li>
                <li><a>我的订单</a></li>
                <li class="toplevel">
                    <div>
                        <a>个人中心</a>
                        <div class="xl">
                            <a href="#">我的优惠券</a>
                            <a href="#">我的购物津贴</a>
                            <a href="#">我的红包</a>
                            <a href="#">我的考拉豆</a>
                            <a href="#">账号管理</a>
                            <a href="#">我的实名认证</a>
                            <a href="#">我的发票抬头</a>
                            <a href="#">我的收藏商品</a>
                            <a href="#">我的关注品牌</a>
                            <a href="#">售后管理</a>
                        </div>
                    </div>
                </li>
                <li class="toplevel ">
                    <div>
                        <a>客户服务</a>
                        <div class="xl">
                            <a href="#">联系客服</a>
                            <a href="#">帮助中心</a>
                            <a href="#">知识产权保护</a>
                            <a href="#">规则中心</a>
                        </div>
                    </div>
                </li>
                <li class="toplevel">
                    <div>
                        <a>充值中心</a>
                        <div class="xl">
                            <a href="#">话费充值</a>
                            <a href="#">游戏充值</a>
                            <a href="#">AppStore充值</a>

                        </div>
                    </div>
                </li>
                <li class="toplevel">
                    <div>
                        <a>消费者权益</a>
                        <div class="xl">
                            <a href="">消费者告知书</a>
                        </div>
                    </div>
                </li>
                <li class="toplevel">
                    <div>
                        <a>更多</a>
                        <div class="xl">
                            <a href="#">收藏本站</a>
                            <a href="#">新浪微博</a>
                            <a href="#">微信公众号</a>
                            <a href="#">招商合作</a>
                        </div>
                    </div>
                </li>
                <li><a>视频内容</a></li>
            </ul>
        </div>
    </div>
    <div id="headerWrap">
        <div id="header">
            <a class="logo" href="#">
                <img src="http://kaola-haitao.oss.kaolacdn.com/f69c45fd-8d91-4e18-8e3f-a546be302a12.png?x-oss-process=image/resize,w_210,h_0/quality,q_85&v=1"
                    alt="">
            </a>
            <div class="search">
                <svg t="1620294861059" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="7058" width="200" height="200">
                    <path
                        d="M480 746.666667A266.666667 266.666667 0 1 1 746.666667 480 267.093333 267.093333 0 0 1 480 746.666667z m0-490.666667A224 224 0 1 0 704 480 224.213333 224.213333 0 0 0 480 256z"
                        p-id="7059"></path>
                    <path d="M638.570667 661.141333l24.576-24.576 147.541333 147.52-24.597333 24.597334z" p-id="7060">
                    </path>
                    <path
                        d="M786.133333 812.373333L634.666667 661.333333l28.373333-28.373333 151.466667 151.253333zM642.133333 661.333333l144 143.786667 21.333334-21.333333L663.04 640z"
                        p-id="7061"></path>
                </svg>
                <input type="text" class="searchinput">
                <a href="./search.html" class="searchBtn"><img
                        src="https://kaola-haitao.oss.kaolacdn.com/6e4da089-9347-4dc2-be19-4962832a4a5c.png?v=1&x-oss-process=image%2Fresize%2Cw_20%2Ch_0%2Fquality%2Cq_85"
                        alt=""></a>
            </div>
            <div class="car">
                <span>购物车</span>
            </div>
        </div>
        <div id="topTabWrap">
            <div id="topTab">
                <div>
                    <svg t="1620300902791" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12564" width="200" height="200">
                        <path
                            d="M870.7 650.9H348.9c-14 0-25.3 11.3-25.3 25.3s11.3 25.3 25.3 25.3h521.8c14 0 25.3-11.3 25.3-25.3s-11.3-25.3-25.3-25.3zM270.7 650.9H153.3c-14 0-25.3 11.3-25.3 25.3s11.3 25.3 25.3 25.3h117.4c14 0 25.3-11.3 25.3-25.3s-11.3-25.3-25.3-25.3zM870.7 486.7H348.9c-14 0-25.3 11.3-25.3 25.3s11.3 25.3 25.3 25.3h521.8c14 0 25.3-11.3 25.3-25.3s-11.3-25.3-25.3-25.3zM270.7 486.7H153.3c-14 0-25.3 11.3-25.3 25.3s11.3 25.3 25.3 25.3h117.4c14 0 25.3-11.3 25.3-25.3s-11.3-25.3-25.3-25.3zM348.9 373.1h521.8c14 0 25.3-11.3 25.3-25.3s-11.3-25.3-25.3-25.3H348.9c-14 0-25.3 11.3-25.3 25.3s11.3 25.3 25.3 25.3zM270.7 322.5H153.3c-14 0-25.3 11.3-25.3 25.3s11.3 25.3 25.3 25.3h117.4c14 0 25.3-11.3 25.3-25.3s-11.3-25.3-25.3-25.3z"
                            p-id="12565"></path>
                    </svg>
                    所有分类
                </div>
                <ul class="dhh">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">海外直购</a></li>
                    <li><a href="#">考拉海购出品</a></li>
                    <li><a href="#">品质奶粉</a></li>
                    <li><a href="#">人气面膜</a></li>
                    <li><a href="#">充值</a></li>
                </ul>

            </div>
        </div>
    </div>
    </div>
    <div class="fdright">
        <ul>
            <li>签到</li>
            <li>购物车</li>
            <li>APP</li>
            <li class="fh">TOP</li>
        </ul>
    </div>
    <div class="contentWrap">
        <div class="mainWrap">
            <div class="main">
                <div class="glass">
                    <div class="mini">
                        <img class="minImg" src="https://kaola-haitao.oss.kaolacdn.com/8e628ef5-74c4-45b8-b68f-f35c6dab47fb.jpg?x-oss-process=image/resize,w_800/quality,q_85" alt="">
                        <div class="mask">

                        </div>
                    </div>

                    <div class="zoom">

                    </div>
                    <div class="carousel">
                        <div class="left"><</div>
                        <div class="ulbox">
                            <ul class="dot">
                                <li><img src="" alt=""></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>

                        </div>
                        <div class="right">></div>
                    </div>
                </div>
                <div class="product">
                    <div class="top1">
                        <img src="../images/zg.JPG" alt="">
                        <span>&nbsp;中国&nbsp;丨MI&nbsp;小米</span>
                    </div>
                    <h3>Redmi红米10X 4G Helio G85游戏芯4800万超清四摄 5020mAh大电量 小孔屏</h3>
                    <p class="info">Helio G85游戏芯 ，5020mAh超长续航 </p>
                    <div class="price">
                        <span>售价</span>
                        <div class="pricecon">
                            <span>￥1099.00</span>起
                        </div>
                        <div class="vipbar">
                            <div class="msg">
                                <img src="../images/xqvip.png" alt="">
                                开通黑卡下单预计省100元，可得290元红包
                                <span>立即开卡</span>
                            </div>
                        </div>
                    </div>
                    <div class="server">
                        <i>服务</i>
                        <span>本商品由&nbsp;自营国内仓&nbsp;发货</span>
                        <p>24:00前完成支付，预计 5月13日(周四) 送达</p>
                    </div>
                    <div class="skubox">
                        <span>颜色</span>
                        <ul>
                            <li class="dj">
                                <img src="../images/tc1.jpg" alt="">
                            </li>
                            <li class="dj">
                                <img src="../images/tc2.jpg" alt="">
                            </li>
                            <li class="dj">
                                <img src="../images/tc3.jpg" alt="">
                            </li>
                            <li class="dj">
                                <img src="../images/tc4.jpg" alt="">
                            </li>
                        </ul>
                        <!-- <em>已选择</em>
                        <i>天际蓝</i> -->
                    </div>
                    <div class="tc">
                        <p class="jsnc">机身内存<em class="dj">6GB</em><em class="dj">4GB</em></p>
                        <div>
                            <div class="ljgm">立即购买</div>
                            <div class="gwc">加入购物车</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var miniImg = ["https://kaola-haitao.oss.kaolacdn.com/8e628ef5-74c4-45b8-b68f-f35c6dab47fb.jpg?x-oss-process=image/resize,w_800/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/9110f259-4509-4ec5-8282-dba8ecfe63e2.jpg?x-oss-process=image/resize,w_800/quality,q_85",
                "https://kaola-haitao.oss.kaolacdn.com/b32a7089-9ffd-4298-a6b8-c859efa212e4.jpg?x-oss-process=image/resize,w_800/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/a43a4a7b-4f01-4ef0-991f-2dfc63dd03f5.jpg?x-oss-process=image/resize,w_800/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/c8e3af95-3726-49f6-adbd-c53f50daf919.jpg?x-oss-process=image/resize,w_800/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/1e7d24d9-5a21-436b-85b8-026edaa51a52.jpg?x-oss-process=image/resize,w_800/quality,q_85"
            ]
            var conImg = [
                "https://kaola-haitao.oss.kaolacdn.com/8e628ef5-74c4-45b8-b68f-f35c6dab47fb.jpg?x-oss-process=image/resize,w_64/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/9110f259-4509-4ec5-8282-dba8ecfe63e2.jpg?x-oss-process=image/resize,w_64/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/b32a7089-9ffd-4298-a6b8-c859efa212e4.jpg?x-oss-process=image/resize,w_64/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/a43a4a7b-4f01-4ef0-991f-2dfc63dd03f5.jpg?x-oss-process=image/resize,w_64/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/c8e3af95-3726-49f6-adbd-c53f50daf919.jpg?x-oss-process=image/resize,w_64/quality,q_85", "https://kaola-haitao.oss.kaolacdn.com/1e7d24d9-5a21-436b-85b8-026edaa51a52.jpg?x-oss-process=image/resize,w_64/quality,q_85"
            ]
            var x, y;
            var img = document.querySelector("minImg")
            var mask = document.querySelector(".mask")
            var mini = document.querySelector(".mini")
            var zoom = document.querySelector(".zoom")
            zoom.backgroundImg=""
            mini.addEventListener("mouseover", mouseHandler)
            mini.addEventListener("mouseout", mouseHandler)
            rect = document.querySelector(".glass").getBoundingClientRect();
            function mouseHandler(e) {
                if (e.type === "mouseover") {
                    mini.addEventListener("mousemove", mouseHandler)
                    mask.style.display = zoom.style.display = "block";

                    // console.log("aa")
                } else if (e.type === "mousemove") {
                    // console.log("aa")
                    x = (e.x - rect.x - 100);
                    y = (e.y - rect.y - 100);
                    if (x < 0) x = 0;
                    if (x > 200) x = 200;
                    if (y < 0) y = 0;
                    if (y > 200) y = 200;
                    // console.log(e.offsetX,e.offsetY);
                    // console.log(e.x,e.y)
                    // console.log(x,y)
                    mask.style.top = y + "px";
                    mask.style.left = x + "px";
                    zoom.style.backgroundPositionX=-x*2+"px";
                    zoom.style.backgroundPositionY=-y*2+"px";
                    // console.log(e.offsetX, mask.style.left)
                    // console.log(e.offsetY, mask.style.top)
                    // mini.removeEventListener("mouseover", mouseHandler);
                } else {
                    mask.style.display = zoom.style.display = "none";
                    mini.removeEventListener("mousemove", mouseHandler);
                }
            }
            var dot=document.querySelector(".dot");
            var left=document.querySelector(".left")
            var right=document.querySelector(".right")
            var dotwidth;
            var dotprev;
            function renderDot(arr){
                dot.innerHTML=arr.reduce(function(value,item){
                    return value+=`<li><img src=${item} alt=""></li>`;
                },"")
                dotwidth=arr.length*82;
                dot.style.width=dotwidth+"px";
            }
            renderDot(conImg);
            left.addEventListener("click",clickHandler);
            right.addEventListener("click",clickHandler);
            var dotx=0;
            var minImg=document.querySelector(".minImg")
            function clickHandler(e){
                if(e.target===left){
                    console.log(dotx>=0)
                    if(dotx>=0)return;
                        dotx+=82;
                    dot.style.left=dotx+"px";
                }else{
                    // console.log(dotx,-(dotwidth-328))
                    if(dotx<=-(dotwidth-328))return;
                    dotx-=82;
                    dot.style.left=dotx+"px";
                } 
            }
            dot.addEventListener("mouseover",dotHandler)
            function dotHandler(e){
                if(e.target.nodeName!=="IMG")return;
                changeDot(e.target.parentElement);
                var index=Array.from(dot.children).indexOf(e.target.parentElement);
                console.log(index)
                minImg.src=miniImg[index];
                zoom.style.backgroundImage=`url(${miniImg[index]})`;
            }
            function changeDot(elem){
                if(dotprev){
                    dotprev.style.border="1px solid #ddd";
                    dotprev.style.width="70px";
                }
                    dotprev=elem;
                    dotprev.style.border="2px solid red";
                    dotprev.style.width="68px";
                    console.log(dot.children)
            }
            var djs=document.querySelectorAll(".dj")
            console.log(djs)
            djs.forEach(function(item){
                item.onclick=function(e){
                    Array.from(this.parentElement.children).forEach(function(item){
                        item.style.border="1px solid #999"
                    })
                    this.style.border="2px solid red"
                }
            })
        </script>
</body>

</html>